import React from "react";

const Login = () => {

    // 初始化表单对象
    const [form] = React.Vant.Form.useForm();

    // 初始化一个路由方法
    let navigate = React.Router.useNavigate();

    // 定义变量状态
    const [mobile,setMobile] = React.useState('');
    const [password,setPassword] = React.useState('');

    const onLogin = async () => {
        if(!mobile)
        {
            React.Vant.Notify.show({
                type:'warning',
                message:'请输入手机号',
                duration:1500,
            });

            return;
        }

        let MobileReg = /^1[356789]\d{9}$/;

        if(!MobileReg.test(mobile))
        {
            React.Vant.Notify.show({
                type:'warning',
                message:'手机号不正确',
                duration:1500,
            });

            return;
        }

        if(!password)
        {
            React.Vant.Notify.show({
                type:'warning',
                message:'请输入密码',
                duration:1500,
            });

            return;
        }

        let data = {
            mobile,
            password
        }

        let result = await React.Api.login(data);

        if(result.code === 1)
        {
            React.Vant.Notify.show({
                type:'success',
                message:result.msg,
                duration:1500,
                onClose:() => {

                    // 返回登录信息存到cookie
                    React.Cookies.save('business',result.data,{path:'/'});

                    navigate('/business/base/index');
                }
            });

            return;
        }else{
            React.Vant.Notify.show({
                type:'warning',
                message:result.msg,
                duration:1500,
            });

            return;
        }
    }

    const onChangeInput = (e) => {
        let name = e.target.name;
        let value = e.target.value;

        switch(name)
        {
            case 'mobile':
                setMobile(value);
                break;
            
            case 'password':
                setPassword(value);
                break;

            default:
        }
    }

    return (
        <>
            {/* 图标样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css" />

            {/* 布局框架 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

            {/* 主要样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />

            <div className="limiter">
                <div className="container-login100" style={{backgroundImage: "url('/assets/images/img-01.jpg')"}}>
                    <div className="wrap-login100 p-t-190 p-b-30">
                        <React.Vant.Form form={form} onFinish={onLogin} className="login100-form validate-form">
                            <div className="login100-form-avatar">
                                <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45">Hello</span>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                                <input className="input100" type="text" name="mobile" value={mobile} placeholder="手机号" onChange={(e) => onChangeInput(e)} autoComplete="off" />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-user"></i>
                                </span>
                            </div>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                                <input className="input100" type="password" name="password" value={password} placeholder="密码" onChange={(e) => onChangeInput(e)} />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-lock"></i>
                                </span>
                            </div>

                            <div className="container-login100-form-btn p-t-10">
                                <button className="login100-form-btn">登 录</button>
                            </div>

                            <div className="text-center w-full p-t-25">
                                <React.Router.NavLink className="txt1" to="/business/base/register">
                                    立即注册
                                    <i className="fa fa-long-arrow-right"></i>
                                </React.Router.NavLink>
                            </div>
                        </React.Vant.Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login;